<!DOCTYPE html>
<html lang="en">

<head>
  <?php include_once('common/meta.php'); ?>
</head>
<style>
  #upload {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    object-fit: cover;
  }
  </style>

<body>
  <?php include_once('common/header.php'); ?>
  <?php include_once('common/menu.php'); ?>



  <div class="content">
    <div class="header">
      <h1 class="page-title">发布文章</h1>
    </div>
    <ul class="breadcrumb">
      <li><a href="index.html">Home</a> <span class="divider">/</span></li>
      <li class="active">AdminAdd</li>
    </ul>

    <div class="container-fluid">
      <div class="row-fluid">

        <div class="btn-toolbar">
          <button class="btn btn-primary" onClick="location='AdminList.php'">
            <i class="icon-list"></i> 管理员列表</button>
          <div class="btn-group">
          </div>
        </div>

        <div class="well">
          <div id="myTabContent" class="tab-content">
            <div class="tab-pane active in" id="home">
              <form method="post" enctype="multipart/form-data">
                <label>用户名</label>
                <input type="text" name="username" placeholder="请输入用户名" class="input-xxlarge">
                <label>密码</label>
                <input type="text" name="password" placeholder="请输入密码" class="input-xxlarge">
                <label>用户名</label>
                <input type="text" name="repass" placeholder="请输入确认密码" class="input-xxlarge">
                <label>头像</label>
                <input type="file" name="avatar" id="avatar" hidden class="input-xxlarge">
                <img src="./assets/images/upload.png" id="upload" onclick="avatar.click()" alt="上传头像" >
                <label></label>
                <input class="btn btn-primary" type="submit" value="提交" />
              </form>
            </div>
          </div>
        </div>
        <?php include_once('common/footer.php'); ?>


      </div>
    </div>
  </div>



</body>

</html>
<script>
  // 头像预览
  $('#avatar').change(function() {

    //获取上传的文件
    let file = $(this)[0].files[0];
    //判断类型
    if (file) {
      //读取一个本地文件的对象
      let Reader = new FileReader();
      //file对象转换成base64编码
      Reader.readAsDataURL(file);
      Reader.onload = function() 
      {
        $('#upload').attr('src', Reader.result);
      }



    }
  })
</script>